{extend name="layout/default" /}
{block name="title"}系统配置{/block}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">{$config.site.name | default='网站配置'}</li>
                <li>{$config.upload.name | default='上传配置'}</li>
                <li>{$config.software.name | default='软件配置'}</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                <!--  网站配置  -->
                    <form class="layui-form" action="">
                        <input type="hidden" name="config_key" value="site">
                        <div class="layui-form-item">
                            <label class="layui-form-label">网站名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title"  placeholder="请输入网站标题" class="layui-input" value="{$config.site.title | default=''}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">网站标题名称</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">站长邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="email"  placeholder="xx@xxx.com" class="layui-input" value="{$config.site.email | default=''}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">站长邮箱地址</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">接口地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="api_url"  placeholder="不设置使用当前域名" class="layui-input" value="{$config.site.api_url | default=''}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">若设置本地文件/配置获取地址均为此地址</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">缓存时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="cache_time"  placeholder="3600" class="layui-input" value="{$config.site.cache_time | default=''}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">部分数据缓存时间, 默认24小时, 单位: 秒</div>
                        </div>
                        <!-- 提交保存 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="pear-btn pear-btn-primary" lay-submit lay-filter="formSave">立即提交</button>
                                <button type="reset" class="pear-btn">重置</button>
                            </div>
                        </div>
                    </form>
                <!--  网站配置  -->
                </div>
                <div class="layui-tab-item">
                <!--  上传配置  -->
                    <form class="layui-form" action="">
                        <input type="hidden" name="config_key" value="upload">
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传格式</label>
                            <div class="layui-input-inline">
                                <input type="text" name="file_ext"  placeholder="jpg,png,gif" class="layui-input" value="{$config.upload.file_ext | default=''}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">输入后缀,多个使用英文逗号分割</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传大小</label>
                            <div class="layui-input-inline">
                                <input type="text" name="file_size"  placeholder="5" class="layui-input" value="{$config.upload.file_size | default=''}">
                            </div>
                            <div class="layui-form-mid layui-word-aux">单位: MB</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上传类型</label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="fileType" name="file_type" value="local" title="本地" checked>
                                <input type="radio" lay-filter="fileType" name="file_type" value="alioss" title="阿里云OSS" >
                            </div>
                        </div>
                        <div class="layui-form-item" id="fileTypeAlioss" style="{if(isset($config.upload.file_type)) AND ($config.upload.file_type == "alioss")}display:block;{else /}display:none;{/if}">
                            <div class="layui-form-item">
                                <label class="layui-form-label">KeyID</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="alioss_accesskey_id"  placeholder="请输入阿里云 AccessKeyID" class="layui-input" value="{$config.upload.alioss_accesskey_id | default=''}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">阿里云 AccessKey ID</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">Secret</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="alioss_accesskey_secret"  placeholder="请输入阿里云 AccessKeySecret" class="layui-input" value="{$config.upload.alioss_accesskey_secret | default=''}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">阿里云 AccessKey Secret</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">OSS 名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="oss_bucket" placeholder="Bucket 名称" class="layui-input" value="{$config.upload.oss_bucket | default=''}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">阿里云OSS Bucket 名称</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">OSS 节点</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="oss_endpoint" placeholder="Bucket 域名, http://" class="layui-input" value="{$config.upload.oss_endpoint | default=''}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">阿里云OSS Bucket 节点</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">绑定域名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="oss_bind_domain" placeholder="http://" class="layui-input" value="{$config.upload.oss_bind_domain | default=''}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">自定义绑定的域名, 没绑定不要填写</div>
                            </div>
                        </div>
                        <!-- 提交保存 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="pear-btn pear-btn-primary" lay-submit lay-filter="formSave">立即提交</button>
                                <button type="reset" class="pear-btn">重置</button>
                            </div>
                        </div>
                    </form>
                <!--  上传配置  -->
                </div>
                <div class="layui-tab-item">
                <!--  软件配置  -->
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>软件新增默认配置</legend>
                    </fieldset>
                    <form class="layui-form" action="">
                        <input type="hidden" name="config_key" value="software">
                        <div class="layui-form-item">
                            <label class="layui-form-label">默认配置</label>
                            <div class="layui-input-block">
                                <blockquote class="layui-elem-quote">
                                    自定义服务端返回配置，可自定义默认配置项，每次新增软件采用该配置。 默认参照EC配置。
                                </blockquote>
                                <div id="softwareViewConfig"></div>
                                <div class="layui-col-xs12">
                                    <button class="pear-btn pear-btn-primary" id="softwareConfigPlus"> <i class="layui-icon layui-icon-addition"></i> 追加 </button>
                                </div>
                            </div>
                        </div>
                        <!-- 提交保存 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="pear-btn pear-btn-primary" lay-submit lay-filter="formSave">立即提交</button>
                                <button type="reset" class="pear-btn">重置</button>
                            </div>
                        </div>
                    </form>
                <!--  软件配置  -->
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="softwareConfigTemplate">
    {{#  layui.each(d, function(index, item){ }}
    <div class="layui-row layui-col-space5">
        <div class="layui-col-xs6 layui-col-sm3">
            <input type="text" name="default[{{ index }}][cnname]" hover placeholder="描述" value="{{ item.cnname }}" class="layui-input">
        </div>
        <div class="layui-col-xs6 layui-col-sm3">
            <input type="text" name="default[{{ index }}][enname]" hover placeholder="键名" value="{{ item.enname }}" class="layui-input">
        </div>
        <div class="layui-col-xs6 layui-col-sm3">
            <select name="default[{{ index }}][type]">
                <option value="">请选择类型</option>
                <option value="file" {{ (item.type=="file") ? "selected" : "" }}>上传</option>
                <option value="text" {{ (item.type=="text") ? "selected" : "" }}>文本</option>
                <option value="textarea" {{ (item.type=="textarea") ? "selected" : "" }}>文本域</option>
                <option value="radio" {{ (item.type=="radio") ? "selected" : "" }}>单选</option>
            </select>
        </div>
        <div class="layui-col-xs2">
            <button class="pear-btn pear-btn-danger" id="softwareConfigRemove" data-index="{{ index }}"> <i class="layui-icon layui-icon-close"></i> </button>
        </div>
    </div>
    {{#  }); }}
</script>
{/block}

{block name="script"}
<script type="text/javascript">
    layui.use(['jquery', 'popup', 'form', 'laytpl'], function() {
        let $ = layui.jquery;
        let popup = layui.popup;
        let form = layui.form;
        let laytpl = layui.laytpl;

        let MODULE_PATH = "/{:request()->controller()}";

        form.on('submit(formSave)', function (data) {
            if(!data.field.config_key || data.field.config_key == "") {
                popup.failure("表单缺少主要参数");
                return false;
            }
            $.ajax({
                url: MODULE_PATH + "/index",
                type: "post",
                data: data.field,
                success: function (res) {
                    if(Number(res.code) === 0) {
                        popup.success(res.msg)
                    } else {
                        popup.failure(res.msg);
                    }
                },
                error: function (res) {
                    popup.failure("保存错误");
                }
            })
            return false;
        });

        form.on('radio(fileType)', function (data) {
            let event = {
                local: function () {
                    $("#fileTypeAlioss").hide();
                },
                alioss: function () {
                    $("#fileTypeAlioss").show();
                },
                default: function () {
                    $("#fileTypeAlioss").hide();
                    popup.failure("上传类型不存在");
                }
            }
            let runEvent = event[data.value] ? event[data.value] : event.default;
            runEvent();
            return false;
        });

        $(function () {
            // 设置上传类型默认值
            {if(isset($config.upload.file_type))}
            $("input[type='radio'][name='file_type'][value='{$config.upload.file_type}']").attr('checked', 'checked');
            // 初始化 radio
            form.render('radio');
            {/if}
        });

        // 默认配置数据
        let softwareConfigForm = {if(!empty($config.software.default))}{:json_encode($config.software.default)}{else /}[{cnname:"下载地址",enname:"download_url",type:"file"},{cnname:"版本号",enname:"version",type:"text"},{cnname:"更新描述",enname:"msg",type:"textarea"},{cnname:"是否弹窗",enname:"dialog",type:"radio"},{cnname:"强制更新",enname:"force",type:"radio"}]{/if};

        function setConfinForm() {
            let configTemplate = document.getElementById('softwareConfigTemplate').innerHTML,
                viewConfig = document.getElementById('softwareViewConfig');
            laytpl(configTemplate).render(softwareConfigForm, function(html){
                viewConfig.innerHTML = html;
                form.render('select');
            });
        }

        // 同步软件配置表单数据
        function syncSoftwareForm() {
            for (let i = 0, len = softwareConfigForm.length; i < len; i++) {
                softwareConfigForm[i]['cnname'] = $("[name='default["+i+"][cnname]']").val();
                softwareConfigForm[i]['enname'] = $("[name='default["+i+"][enname]']").val();
                softwareConfigForm[i]['type'] = $("[name='default["+i+"][type]']").val();
            }
        }

        // 初始化配置表单
        setConfinForm();

        // 增加软件默认配置
        $(document).on('click', '#softwareConfigPlus', function () {
            syncSoftwareForm();
            softwareConfigForm.push({
                cnname: "",
                enname: "",
                type: "text"
            });
            console.log(softwareConfigForm)
            setConfinForm();
            return false;
        });

        // 删除软件默认配置
        $(document).on('click', '#softwareConfigRemove', function () {
            syncSoftwareForm();
            let index = $(this).data('index');
            softwareConfigForm.splice(index, 1);
            setConfinForm();
            return false;
        })

    });
</script>
{/block}